<template>
	<div class="app-container">
		<jk-operation-card ref="box1" class="margin-bottom-10">
			<div ref="box1" class="flex-between-center-wrap">
				<div class="flex-start-center-wrap">
					<jk-add-button :permission-prefix="prefix" class="margin-5-0 item-gap" @click="onAddBtn"></jk-add-button>
					<!--<jk-report-button :permission-prefix="prefix" class="margin-5-0" :loading="exportLoading" @click="onReportBtn"></jk-report-button>-->
				</div>
				<div class="flex-end-center-wrap">
					<jk-search-input v-model="searchParams.nameOrCode" size="small" class="search-bar-item-size2 item-gap margin-5-0" placeholder="编号或名称" clearable @clear="onSearchBtn" @keyup.enter.native="onSearchBtn" />
					<jk-search-button @click="onSearchBtn"></jk-search-button>
				</div>
			</div>
		</jk-operation-card>
		<jk-card class="margin-top-10">
			<jk-table :loading="tableLoading" :data="tableData" :height="tableHeight + 20">
				<vxe-column title="名称" align="left" field="name" :min-width="100" />
				<vxe-column title="编号" align="left" field="code" :min-width="100" />
				<vxe-column title="岗位分类" align="left" field="typeName" :min-width="100" />
				<vxe-column title="是否生产岗" align="center" field="auditState" :width="90">
					<template slot-scope="scope">
						<span>{{ scope.row.ifMainPost ? '是' : '否' }}</span>
					</template>
				</vxe-column>
				<vxe-column title="工序" align="left" field="processName" :width="80" />
				<vxe-column title="排序" align="center" field="sortNum" :width="90" />
				<vxe-column title="状态" align="center" field="auditState" :width="90">
					<template slot-scope="scope">
						<jk-common-status :status="scope.row.auditState"></jk-common-status>
					</template>
				</vxe-column>
				<vxe-column title="创建人" align="left" field="creatorName" width="90"></vxe-column>
				<vxe-column title="创建时间" align="left" field="createTime" width="160"></vxe-column>
				<vxe-column title="修改人" align="left" field="updaterName" width="90"></vxe-column>
				<vxe-column title="修改时间" align="left" field="updateTime" width="160"></vxe-column>
				<vxe-column title="操作" align="center" fixed="right" :width="250">
					<template slot-scope="scope">
						<jk-operation-bar
							:scope="scope"
							api-prefix="system/post"
							:permission-prefix="prefix"
							@on-detail="onDetailBtn"
							@on-edit="onEditBtn"
							@on-refresh="getListRequest"
						></jk-operation-bar>
					</template>
				</vxe-column>
			</jk-table>
			<footer ref="box2" class="flex-end-center margin-top-10">
				<jk-page
					:page-index="searchParams.pageNo"
					:page-sizes="searchParams.pageSizes"
					:page-size="searchParams.pageSize"
					:total="totalCount"
					@on-change="onPageChange"
				/>
			</footer>
		</jk-card>
		<detail-dialog
			:data-id="dataId"
			:dialog-state="detailDialogState"
			@on-visible-change="onVisibleChangeOfDetailDialog"
		></detail-dialog>
		<save-dialog
			:permission-prefix="prefix"
			:dialog-state="saveDialogState"
			:data-id="dataId"
			@on-visible-change="onVisibleChange"
			@on-finish="onConfirm"
		></save-dialog>
	</div>
</template>

<script>
    import permissionMixin from '@/mixins/permission-mixin';
    import calHeight from '@/mixins/cal-table-height';
    import { pageConfig } from '@/utils/jk/jk-tool';
    import { statusList } from '../../../utils/jk/status-option-list';
    import saveDialog from './save-dialog';
    import {
        systemPostAudit, systemPostClearAudit, systemPostClearClose,
        systemPostClearSubmitAudit, systemPostClose,
        systemPostDelete,
        systemPostExportExcel,
        systemPostPage,
        systemPostSubmitAudit, systemPostUpdateAudit
    } from '../../../api/system/post';
    import detailDialog from './detail-dialog';
    export default {
        name: 'Post',
        mixins: [permissionMixin, calHeight],
        components: { detailDialog, saveDialog },
        data() {
            return {
                prefix: 'personnel:post',
                detailDialogState: false,
                apiItem: {
                    'page': systemPostPage,
                    'exportExcel': systemPostExportExcel,
                    'delete': systemPostDelete,
                    'submit': systemPostSubmitAudit,
                    'cancelSubmit': systemPostClearSubmitAudit,
                    'submitAudit': systemPostUpdateAudit,
                    'audit': systemPostAudit,
                    'cancelAudit': systemPostClearAudit,
                    'close': systemPostClose,
                    'cancelClose': systemPostClearClose
                },
                saveDialogState: false,
                statusList: statusList,
                tableHeight: 0,
                tableLoading: true,
                exportLoading: false,
                dataId: null,
                tableData: [],
                totalCount: 0,
                searchParams: {
                    pageNo: pageConfig.pageNo,
                    pageSize: pageConfig.pageSize,
                    nameOrCode: '',
                    status: null
                }
            };
        },
        created() {
            this.getListRequest();
        },
        methods: {
            onVisibleChangeOfDetailDialog(e) {
                this.detailDialogState = e;
                if (!e) {
                    this.dataId = null;
                }
            },
            onDetailBtn(e) {
                this.dataId = e.id;
                this.detailDialogState = true;
            },
            onConfirm() {
                this.saveDialogState = false;
                this.getListRequest();
            },
            onVisibleChange(e) {
                this.saveDialogState = e;
            },
            onPageChange(pageIndex, pageSize) {
                this.searchParams.pageNo = pageIndex;
                this.searchParams.pageSize = pageSize;
                this.getListRequest();
            },
            /** 查询岗位列表 */
            getListRequest() {
                this.tableLoading = true;
                return this.apiItem['page'](this.searchParams).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        this.tableData = res.data.res;
                        this.totalCount = res.data.count;
                    }
                });
            },
            /** 搜索按钮操作 */
            onSearchBtn() {
                this.searchParams.pageNo = 1;
                this.getListRequest();
            },
            /** 新增按钮操作 */
            onAddBtn() {
                this.dataId = null;
                this.saveDialogState = true;
            },
            /** 修改按钮操作 */
            onEditBtn(row) {
                this.dataId = row.id;
                this.saveDialogState = true;
            },
            /** 导出按钮操作 */
            onReportBtn() {
                const searchParams = this.searchParams;
                this.$confirm('是否确认导出所有岗位数据项?', { type: 'warning' }).then(() => {
                    this.exportLoading = true;
                    return this.apiItem['exportExcel'](searchParams);
                }).then(res => {
                    this.$download.excel(res, `${this.$route.meta.name}.xls`);
                    this.exportLoading = false;
                }).catch(() => {});
            }
        }
    };
</script>
